<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <style>
        ul {
            list-style: none;
        }
    </style>
    <ul></ul>

    <script>
        var ul = document.querySelector('ul');
        var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
        function render(element) {
            var str = `<li>姓名：<span>${person.name}</span></li>
                       <li>性别：<span>${person.sex}</span></li>
                       <li>年龄：<span>${person.age}</span></li>
                       <li>身高：<span>${person.height}</span></li>
                       <li>体重：<span>${person.weight}</span></li>`
            element.innerHTML = str;
            
        }
        render(ul);
        // 补全代码
        for (const key in person) {
            let v = person[key];
            console.log(v);
            Object.defineProperty(person, key, {
                get() {
                    return v
                },
                set(val) {
                    if (val !== v) {
                        console.log(val);
                        v = val
                        render(ul)
                    }
                }
            })
        }
        function s() { person.age = 44; var spans = document.querySelectorAll('span'); var result = spans[2].innerText == 44; return result; }
        console.log(s()) 
    </script>
</body>

</html>